<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /*1.属性选择器*/
      /*p[class]{
            color:#f00
        }*/
      /*p[class=content]{
            color:#f00
        } */
      /*p[class^=content]{/*class属性以content开头
            color:#f00
        }*/
      /*p[class$=content]{/*class属性以content结尾
            color:#f00
        }*/
      /*p[class*=p]{/*class属性值中包含有p的
            color:#f00
        }*/

      /*2.结构性伪类*/
      /* 1）:root 匹配html标签,与body选择器一样*/
      /*:root{
            background-color: pink;
        }
        body{
            background-color: pink;
        }*/
      /*2）子元素选择：匹配父元素中连续的子元素
            :first-child：第一个子元素
            :last-child：最后一个子元素
            :nth-last-child(n)：倒数第n个子元素
            :nth-child(n)：第几个子元素
        */
      /*p:first-child{
            color: green;
        }
        p:last-child{
            color:aqua
        }
        p:nth-last-child(3){
            color: blue;
        }
        p:nth-child(2){
            color: darkgrey;
        }
        p:nth-child(2n){/*2n表示2的倍数 2,4,6...
            color: purple;
        }
        p:nth-child(3n+1){
            color: yellow;/*表示3的倍数加1
        }*/
      /*
        3.nth-of-type类：用于匹配父类元素中兄弟子元素，可以用于元素非连续的情况
            ：nth-of-type(n)
            :nth-last-of-type(n)
        */
      /*P:nth-of-type(3){
            color: red; /*找的是p标签中的第3个兄弟p标签，如果第3个不是p标签，将跳过，继续向下找，直到找到为止
        }*/
      /*p:nth-child(3){/*找第3个子元素，如果是p标签，就找到了，如果不是，就没找对，其不再继续查找
            color: rebeccapurple;
        }*/
      /*p:nth-last-of-type(4){/*找的是p标签中倒数第4个兄弟标签，如果第4个不是p标签，将跳过，继续往前查找，直到找到为止
            color: brown;
        }*/
      /*
        4.其他
            1）：only-child  父元素中仅有一个子元素
            2）：only-of-type 父元素中仅有一个兄弟元素
            3）:empty  没有子元素，包括文本元素，即查找空元素
        */
      /*p:only-child{/*查找父元素中只有的一个标签为p标签 不允许其他标签的存在，但p标签中可以有子标签
            width: 200px;
            border: 1px solid pink;
            background-color: purple;
        }*/
      p:only-of-type {
        /*选择父元素中p标签是唯一的子元素，可以有其他标签的存在*/
        width: 200px;
        border: 1px solid pink;
        background-color: purple;
      }
      div:empty {
        width: 200px;
        height: 100px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <p class="content p1">段落1</p>
      <p class="p2 content">段落2</p>
      <div class="box">div-box</div>
      <p class="content">段落3</p>
      <div></div>
      <p class="content">段落4</p>
      <p class="content p5">段落5</p>

      <div><p>ppp</p></div>
      <div>
        <p>ppp <span>span</span></p>
      </div>
      <div>
        <p>ppp</p>
        <div>div</div>
      </div>
      <div>
        <p>ppp</p>
        <p>div</p>
      </div>

      <div class="test"></div>
    </div>
  </body>
</html>
